<template>
	<view class="content">
		<view class="avatar">
			<view class="user-avatar"><open-data type="userAvatarUrl"></open-data></view>
		</view>
		<view class="dec">
			<text v-if="show">申请获取你的微信绑定的手机号登录</text>
			<text v-else>申请获取你的微信用户信息</text>
		</view>
		<view class="button">
			<u-button @click="bindShow" v-if="show" hover-class="none" :hair-line="false" :custom-style="customStyle">微信绑定手机号登录</u-button>
			<u-button @click="bindToIndex" v-if="!show" hover-class="none" :hair-line="false" :custom-style="customStyle">获取用户信息</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			customStyle: {
				"border-radois": "10rpx",
				"width": "300px",
				"margin-top": "20rpx",
				"background-color": "#64B16D",
				"color": "#FFF"
			},
			show: true
		};
	},
	methods:{
		bindShow(){
			this.show = !this.show
		},
		bindToIndex(){
			this.$u.route({
				type: "tab",
				url: "pages/index/index"
			})
		}
	}
};
</script>

<style lang="scss">
.content {
	.avatar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding-top: calc((100vh - 360rpx) / 2);
		.user-avatar {
			width: 150rpx;
			height: 150rpx;
		}
	}
	.dec{
		text-align: center;
		color: #787878;
		font-size: 26rpx;
		padding: 32rpx 0;
	}
}
</style>
